<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="bg-gray-50 min-h-screen">
    <view class="gradient-bg fixed w-full top-0 px-4 py-3 z-10">
      <view class="flex items-center">
        <img
          src="https://ai-public.mastergo.com/ai/img_res/a4867368e2ae6c4e72e36604539c1e48.jpg"
          alt="头像"
          class="w-12 h-12 rounded-full border-2 border-white"
        />
        <view class="ml-3 text-white">
          <view class="text-lg font-medium">您好，张经理</view>
          <view class="text-sm bg-white/20 inline-block px-2 py-0.5 rounded-full">物业管家</view>
        </view>
      </view>
    </view>

    <view class="pt-24 px-4 pb-20">
      <view class="bg-white rounded-xl p-4 message-box mb-6">
        <view class="text-lg mb-2">你好，我是小鑫，你的工作助手已上线！</view>
        <view class="text-gray-600 text-sm mb-4">
          我可以帮你处理系统使用、报修流程、管家工作指引等问题......
        </view>
        <view class="flex justify-between items-center border-t pt-3">
          <view class="flex space-x-4">
            <i class="fas fa-paperclip text-gray-400"></i>
            <i class="fas fa-image text-gray-400"></i>
          </view>
          <view class="flex space-x-4">
            <i class="fas fa-volume-up text-gray-400"></i>
            <i class="fas fa-phone text-gray-400"></i>
            <i class="fas fa-microphone text-gray-400"></i>
            <i class="fas fa-ellipsis-h text-gray-400"></i>
          </view>
        </view>
      </view>

      <view class="mb-6">
        <view class="text-gray-700 mb-4">你可以尝试下面功能</view>
        <view class="grid grid-cols-4 gap-4">
          <view class="flex flex-col items-center">
            <view class="feature-icon bg-blue-50 rounded-lg mb-2">
              <i class="fas fa-clipboard-list text-primary text-xl"></i>
            </view>
            <span class="text-sm text-gray-600">智能工单</span>
          </view>
          <view class="flex flex-col items-center" @click="goPage('fees/recommend')">
            <view class="feature-icon bg-blue-50 rounded-lg mb-2">
              <i class="fas fa-money-bill-wave text-primary text-xl"></i>
            </view>
            <span class="text-sm text-gray-600">缴费提醒</span>
          </view>
          <view class="flex flex-col items-center" @click="goPage('duojing/recommend')">
            <view class="feature-icon bg-blue-50 rounded-lg mb-2">
              <i class="fas fa-bell text-primary text-xl"></i>
            </view>
            <span class="text-sm text-gray-600">多经提醒</span>
          </view>
          <view class="flex flex-col items-center">
            <view class="feature-icon bg-blue-50 rounded-lg mb-2">
              <i class="fas fa-heart text-primary text-xl"></i>
            </view>
            <span class="text-sm text-gray-600">业主关怀</span>
          </view>
        </view>
      </view>

      <view>
        <view class="text-gray-700 mb-4">个人专区</view>
        <view class="bg-white rounded-xl p-4 flex items-center justify-between">
          <view class="flex items-center">
            <view class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
              <i class="fas fa-tasks text-primary"></i>
            </view>
            <span class="ml-3 text-gray-700">我的任务</span>
          </view>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </view>
      </view>
    </view>

    <view
      class="fixed bottom-0 w-full bg-white border-t px-4 py-2 flex justify-around items-center"
    >
      <view class="flex flex-col items-center">
        <i class="fas fa-home text-primary text-xl"></i>
        <span class="text-xs text-primary mt-1">首页</span>
      </view>
      <view class="flex flex-col items-center">
        <i class="fas fa-list-alt text-gray-400 text-xl"></i>
        <span class="text-xs text-gray-400 mt-1">工单</span>
      </view>
      <view class="flex flex-col items-center">
        <i class="fas fa-user text-gray-400 text-xl"></i>
        <span class="text-xs text-gray-400 mt-1">我的</span>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
//
function goPage(page: string) {
  uni.navigateTo({
    url: `/pages/${page}`,
  })
}
</script>

<style lang="scss" scoped>
//
.gradient-bg {
  background: linear-gradient(135deg, #4169e1 0%, #87ceeb 100%);
}
.message-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
</style>
